Bootstrap collapse

Hacer elementos colapsables usando Bootstrap.

Código de ejemplo

Para utilizar elementos colapsables con Bootstrap tenemos que usar dos elementos, uno será el activador (el elemento que pulsamos para colapsar o descolapsar) y el otro será el propio contenido que queremos colapsar

Usaremos un boton como activador y colapsaremos un miniformulario con dos elementos (un texto y un boton)

En el boton tenemos que definir dos propiedades data-bs-toggle para indicar que es el activador y data-bs-target para indicar el id del contenido que queremos colapsar

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#content" aria-expanded="false" aria-controls="collapseExample">
  Boton para colapsar
</button>

Las propiedades aria-expanded y aria-controls no son necesarias para que funcione, pero son obligatorias para la accesibilidad de la página (por ejemplo para lectores para invidentes)

Despues en el contenido simplemente tenemos que indicar el id que habíamos indicado en el data-bs-target, y a mayores indicar la clase collapse:

<div id="content" class="collapse" style="width:30%;">
  <p>texto</p>
  <input type="button" value="button"/>
</div>

En vez de usar un boton para activar o desactivar el colapsable podemos usar JavaScript directamente

Primero creamos una funcion JavaScript tal que asi:

<script type="text/javascript">
  function collapseFunction(){
    var elementToCollapse = document.getElementById("content");
    new bootstrap.Collapse(elementToCollapse)
  }
</script>

En el getElementById indicamos el id del elemento que queremos colapsar

Despues simplemente creamos un elemento que llame a la funcion collapseFunction():

<p>
  <a href="#" onclick="collapseFunction()">Link para colapsar</a>
</p>

En este caso llamamos a la funcion con el evento onclick, pero podemos llamarlo con cualquier otro evento.

Web development | Bootstrap | collapse